<script setup>
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/userStore.js'
import { putFeedbackApi } from '@/api/feedback.js'
import { useRouter } from 'vue-router'
// import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()
const isList = ref(false) // 是否显示反馈列表
const refForm = ref()
const fromData = ref({
  issueType: '', // 问题类型
  summary: '', // 概要
  description: '' // 描述
})
const feedbackType = ref([{
  value: '1',
  label: '使用问题'
}, {
  value: '2',
  label: '技术支持'
}, {
  value: '3',
  label: '需求建议'
}, {
  value: '4',
  label: '其他'
}])
const fromRules = reactive({
  issueType: [{ required: true, message: '请选择问题类型', trigger: 'blur' }],
  summary: [{ required: true, message: '请输入概要', trigger: 'blur' }],
  description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
})
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      //TODO 发送请求
      await putFeedbackApi(userStore.user.uid, JSON.stringify(fromData.value))
      ElMessage.success('提交成功')
    } else {
      ElMessage.error('请填写完整信息')
    }
  })
}
const handleCancel = () => {
  ElMessage.info('您已取消提交反馈')
}

/**
 * 展示反馈列表
 */
const showList = () => {
  router.push('/myFeedback')
  console.log('展示反馈列表')
}
</script>

<template>
  <div class="feedback">
    <div class="feedback-box">
      <div class="feedback-title">
        <h1>{{ '反馈中心' }}</h1>
        <el-button :color="'#39c5bb'" :icon="isList?'Back':'Message'" bg plain @click="showList">
          {{ isList ? '返回反馈' : '我的反馈' }}
        </el-button>
      </div>
      <div class="feedback-content">
        <div class="feedback-content-item">
          <el-text size="large" style="font-size: 18px;font-weight: bold">尊敬的用户：</el-text>
          <br>
          <el-text style="padding-left: 2rem">感谢您提供诚挚的建议，我们将尽快帮您处理解决。</el-text>
        </div>

        <el-form
          ref="refForm"
          :model="fromData"
          :rules="fromRules"
          class="from-content"
          label-position="top"
          size="large"
          style="margin-top: 20px"
        >
          <el-form-item
            :rules="{ required: true, message: '请选择问题类型', trigger: ['blur', 'change'] }"
            label="问题类型"
            prop="issueType"
          >
            <div class="card-list" style="display: flex;align-items: center;gap: 20px">
              <div
                v-for="t in feedbackType"
                :key="t.label"
                @click="fromData.issueType = t.value"
              >
                <el-button :color="fromData.issueType===t.value?'#39c5bb':''" plain type="info">{{ t.label }}
                </el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="概述" prop="summary">
            <el-input v-model="fromData.summary" :show-word-limit="true" maxlength="50" minlength="5"
                      style="width: 500px"
                      type="text"></el-input>
          </el-form-item>
          <el-form-item label="问题描述" prop="description">
            <el-input v-model="fromData.description" :rows="4" :show-word-limit="true" maxlength="150" minlength="10"
                      type="textarea"></el-input>
          </el-form-item>
          <div class="btn-row" style="margin-top: 60px;display: flex;justify-content: flex-end;gap: 20px">
            <el-button class="btn-row-left" round size="large" type="info" @click="handleCancel"
            >取 消
            </el-button>
            <el-button
              class="btn-row-right"
              color="#39c5bb"
              round
              size="large"
              style="color: #ffffff"
              type="primary"
              @click="onSubmit(refForm)"
            >提 交
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.feedback {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 50px;

  &-box {
    width: 70%;
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  &-title {
    padding: 20px;
    border-bottom: 2px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-content {
    padding: 20px;
  }
}
</style>